<template>
    <div id="road" @click="change" :style="log==0?'background-color:rgb(245, 245, 245)':'background-color: rgba(13, 13, 13, 0.8)'">查看公告</div>
    <el-dialog v-model="dialogVisible" title="公告" width="60%" :append-to-body="true">
        <el-table :data="tableData" style="width: 100%" size="small" :max-height="400" @row-click="clickRow">
          <el-table-column :show-overflow-tooltip="true" prop="notice_content" label="编号" width="700"/> 
          <el-table-column prop="notice_id" label="公告编码" />
            <el-table-column prop="notice_time" label="时间" />
            <el-table-column prop="user_id" label="公告单位" />
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
  </template>
  
  <script setup>
   import {ref,computed} from 'vue'
   import axios from "axios"
   const dialogVisible = ref(false)
   let tableData = ref([])
    //const noticedata = ref([])
   const log=ref(0);
  let active=ref()
  
    const change=()=>{
      if(log.value==0){
        log.value=1
        axios.get('http://127.0.0.1/notice/all').then(res=>{
           //console.log(res.data);
            tableData= res.data
            dialogVisible.value=true
            console.log(tableData);
      }).catch(err=>{
          console.log("获取数据失败" + err);
      })
      }else {
        log.value=0  
      }
    }
  


  
  </script>
  <style scoped>
    #road{
      height: 100%;
      width:150px;
      font-size: 25px;
      color:grey;
      line-height: 80px;
      border-left: 1px solid;
      border-color: gray;
      padding-left: 7px;
    padding-right: 7px;
      align-items: center;
      display: flex;
      justify-content: center;
     
    }
  </style>